document.addEventListener('DOMContentLoaded', function() {
    // 获取Canvas元素和上下文
    const canvas = document.getElementById('ocean-bg');
    const ctx = canvas.getContext('2d');
    
    // 设置Canvas大小为窗口大小
    function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    }
    
    // 监听窗口大小变化，调整Canvas大小
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();
    
    // 海浪配置
    const waveCount = 5; // 波浪数量
    const waves = [];
    
    // 初始化波浪参数
    function initWaves() {
        const baseHue = 200; // 蓝色基调
        
        for (let i = 0; i < waveCount; i++) {
            const opacity = 0.1 + (i / waveCount) * 0.6;
            const height = 20 + i * 15;
            const speed = 0.06 - (i * 0.005);
            const segments = 10 + i * 3;
            const lineWidth = 2 + i;
            const hue = baseHue - i * 5;
            
            waves.push({
                points: [],
                opacity: opacity,
                height: height,
                speed: speed,
                offset: Math.random() * Math.PI * 2,
                segments: segments,
                lineWidth: lineWidth,
                color: `hsla(${hue}, 80%, 50%, ${opacity})`,
                time: 0
            });
        }
    }
    
    // 更新波浪状态
    function updateWaves() {
        const width = canvas.width;
        const height = canvas.height;
        
        // 更新每个波浪
        for (let i = 0; i < waves.length; i++) {
            const wave = waves[i];
            wave.time += wave.speed;
            
            // 生成波浪点
            wave.points = [];
            
            const segmentWidth = width / wave.segments;
            const yBase = height * 0.65 + (i * height * 0.05); // 波浪基线位置
            
            for (let j = 0; j <= wave.segments; j++) {
                const x = j * segmentWidth;
                const y = yBase + Math.sin(j * 0.3 + wave.time + wave.offset) * wave.height;
                wave.points.push({ x, y });
            }
        }
    }
    
    // 绘制海洋背景
    function drawOcean() {
        const width = canvas.width;
        const height = canvas.height;
        
        // 清除画布
        ctx.clearRect(0, 0, width, height);
        
        // 绘制渐变天空背景
        const skyGradient = ctx.createLinearGradient(0, 0, 0, height * 0.65);
        skyGradient.addColorStop(0, '#87CEEB'); // 天空蓝
        skyGradient.addColorStop(1, '#E0F7FF'); // 浅蓝色
        
        ctx.fillStyle = skyGradient;
        ctx.fillRect(0, 0, width, height);
        
        // 绘制太阳
        const sunRadius = width * 0.05;
        const sunX = width * 0.15;
        const sunY = height * 0.15;
        
        const sunGradient = ctx.createRadialGradient(
            sunX, sunY, 0,
            sunX, sunY, sunRadius
        );
        sunGradient.addColorStop(0, 'rgba(255, 255, 190, 1)');
        sunGradient.addColorStop(0.8, 'rgba(255, 200, 100, 0.8)');
        sunGradient.addColorStop(1, 'rgba(255, 180, 50, 0)');
        
        ctx.fillStyle = sunGradient;
        ctx.beginPath();
        ctx.arc(sunX, sunY, sunRadius * 1.5, 0, Math.PI * 2);
        ctx.fill();
        
        // 绘制一些云朵
        drawCloud(width * 0.3, height * 0.15, width * 0.15);
        drawCloud(width * 0.7, height * 0.22, width * 0.18);
        
        // 绘制海浪
        for (let i = waves.length - 1; i >= 0; i--) {
            const wave = waves[i];
            
            ctx.beginPath();
            ctx.lineWidth = wave.lineWidth;
            ctx.strokeStyle = wave.color;
            ctx.fillStyle = wave.color;
            
            // 起始点
            ctx.moveTo(0, height);
            ctx.lineTo(wave.points[0].x, wave.points[0].y);
            
            // 绘制波浪曲线
            for (let j = 0; j < wave.points.length - 1; j++) {
                const current = wave.points[j];
                const next = wave.points[j + 1];
                
                // 使用贝塞尔曲线实现平滑波浪
                const cpX = (current.x + next.x) / 2;
                const cpY1 = current.y;
                const cpY2 = next.y;
                
                ctx.bezierCurveTo(cpX, cpY1, cpX, cpY2, next.x, next.y);
            }
            
            // 闭合路径
            ctx.lineTo(width, height);
            ctx.lineTo(0, height);
            ctx.closePath();
            ctx.fill();
        }
        
        // 绘制一些波光效果
        drawSparkles();
    }
    
    // 绘制云朵
    function drawCloud(x, y, size) {
        ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
        ctx.beginPath();
        ctx.arc(x, y, size * 0.3, 0, Math.PI * 2);
        ctx.arc(x + size * 0.2, y - size * 0.1, size * 0.25, 0, Math.PI * 2);
        ctx.arc(x + size * 0.4, y, size * 0.3, 0, Math.PI * 2);
        ctx.arc(x + size * 0.6, y - size * 0.05, size * 0.2, 0, Math.PI * 2);
        ctx.arc(x + size * 0.3, y + size * 0.1, size * 0.25, 0, Math.PI * 2);
        ctx.fill();
    }
    
    // 绘制波光效果
    let sparkles = [];
    
    function initSparkles() {
        sparkles = [];
        const sparkleCount = 50;
        
        for (let i = 0; i < sparkleCount; i++) {
            sparkles.push({
                x: Math.random() * canvas.width,
                y: canvas.height * 0.65 + Math.random() * (canvas.height * 0.35),
                size: Math.random() * 3 + 1,
                speed: Math.random() * 0.02 + 0.01,
                brightness: Math.random() * 0.5 + 0.5,
                alpha: Math.random() * 0.5 + 0.1,
                time: Math.random() * Math.PI * 2
            });
        }
    }
    
    function drawSparkles() {
        ctx.save();
        
        // 更新并绘制每个波光
        for (let i = 0; i < sparkles.length; i++) {
            const sparkle = sparkles[i];
            sparkle.time += sparkle.speed;
            
            // 波光闪烁效果
            const alpha = sparkle.alpha * (0.5 + 0.5 * Math.sin(sparkle.time));
            
            // 绘制波光
            ctx.fillStyle = `rgba(255, 255, 255, ${alpha})`;
            ctx.beginPath();
            ctx.arc(sparkle.x, sparkle.y, sparkle.size, 0, Math.PI * 2);
            ctx.fill();
            
            // 移动波光位置 (随机左右移动)
            sparkle.x += Math.sin(sparkle.time) * 0.5;
            
            // 如果移出屏幕，重置位置
            if (sparkle.x < 0) sparkle.x = canvas.width;
            if (sparkle.x > canvas.width) sparkle.x = 0;
        }
        
        ctx.restore();
    }
    
    // 动画循环
    function animate() {
        updateWaves();
        drawOcean();
        requestAnimationFrame(animate);
    }
    
    // 初始化并开始动画
    initWaves();
    initSparkles();
    animate();
}); 